<@override name="content">
<form class="form-horizontal" action="contest/save" method="post">
  <div class="control-group contest <#if titleMsg??>error</#if>">
    <label class="control-label" for="inputTitle">Title</label>
    <div class="controls">
      <textarea id="inputTitle" name="contest.title" rows="1" cols="120" required></textarea>
      <p class="text-error">${titleMsg!}</p>
    </div>
  </div>
  <div class="control-group contest">
    <label class="control-label" for="inputStartTime">Start Time</label>
    <div class="controls input-append date form_datetime" id="startTime">
      <input size="16" type="text" name="startTime" id="inputStartTime" value="${startDateTime!}" readonly required>
      <span class="add-on"><i class="icon-th"></i></span>
    </div>
  </div>
  <div class="control-group contest">
    <label class="control-label" for="inputEndTime">End Time</label>
    <div class="controls input-append date form_datetime" id="endTime">
      <input size="16" type="text" name="endTime" id="inputEndTime" value="${endDateTime!}" readonly required>
      <span class="add-on"><i class="icon-th"></i></span>
    </div>
  </div>
  <div class="control-group contest">
    <label class="control-label" for="inputDescription">Description</label>
    <div class="controls">
      <textarea id="inputDescription" name="contest.description" rows="10" cols="120"></textarea>
    </div>
  </div>
  <div class="control-group contest">
    <label class="control-label" for="inputReport">Report</label>
    <div class="controls">
      <textarea id="inputReport" name="contest.report" rows="13" cols="120"></textarea>
    </div>
  </div>
  <div class="control-group contest">
    <label class="control-label" for="inputType">Type</label>
    <div class="controls">
      <select name="contest.type" id="inputType">
        <option value="0">Public</option>
        <option value="1">Password</option>
        <option value="2">Private</option>
        <option value="3">Strict Private</option>
        <option value="4">Test</option>
      </select>
    </div>
  </div>
  <div class="control-group <#if passMsg??>error</#if>" id="password" style="display: none">
    <label class="control-label" for="inputPassword"> Password </label>
    <div class="controls">
      <div class="input-prepend" id="contest-password"></div>
      <p class="text-error">${passMsg!}</p>
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox"> <input type="checkbox" name="contest.freeze" value="1">Freeze
      </label>
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="reset" class="btn btn-info">Reset</button>
    </div>
  </div>
</form>
</@override>
<@override name="scripts">
  <link href="assets/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
  <script type="text/javascript" src="assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>

  <script type="text/javascript">
    $(document).ready(function(){
        $("#inputType").change(function() {
            var val = $(this).val();
            if(val == 1) {
                $("div#password").show();
                $("div#contest-password").html('<span class="add-on"><i class="icon-lock"></i></span><input type="password" id="inputPassword" name="contest.password" placeholder="Password" required>');
            }
            else {
              $("div#contest-password").html('');
                $("div#password").hide();
            }
        });
    });

    $('#startTime').datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left",
        //minuteStep: 30

    }).on('changeDate', function(ev){
        var time = ev.date.valueOf();
        var date = formatDate(new Date(time + 3600000));
        var endDate = formatDate(new Date(time + 18000000));
        
        $('#inputEndTime').val(endDate);
        $('#endTime').datetimepicker('setStartDate', date);
    });

    $("#endTime").datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left",
        startDate: "${startTime!}",
        //minuteStep: 30
    });

    function formatDate(now) {
      var year=now.getUTCFullYear();
      var month=now.getUTCMonth()+1; month = (month < 10 ? '0' : '') + month;
      var date=now.getUTCDate(); date = (date < 10 ? '0' : '') + date;
      var hour=now.getUTCHours(); hour = (hour < 10 ? '0' : '') + hour;
      var minute=now.getUTCMinutes(); minute = (minute < 10 ? '0' : '') + minute;
      return year+"-"+month+"-"+date+" "+hour+":"+minute;
    }
    function getLocalTime(time) {     
       return new Date(time).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
    }
  </script>
</@override>
<@extends name="../common/_layout.html" />
